<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { addApi, updateApi, showBackApi } from '@/api/warehouse/warehouse'
import { showApi } from '@/api/area'
const dialogVisible = ref(false)
const value = ref([])
const dialogFormData = ref({
  id: null,
  name: null,
  cityId: null,
  cityName: null,
  provinceId: null,
  provinceName: null,
  address: null,
  location: null,
  personChargeName: null,
  saasId: null,
  isDel: '0'
})
const resetForm = () => {
  dialogVisible.value = false
  dialogFormData.value = {
    id: null,
    name: null,
    cityId: null,
    cityName: null,
    provinceId: null,
    provinceName: null,
    address: null,
    location: null,
    personChargeName: null,
    saasId: null,
    isDel: '0'
  }
}
const areaList = ref()
const getAreaList = async () => {
  let res = await showApi()
  areaList.value = res
}
// 级联选择器配置 - 简化版
const cascaderProps = {
  expandTrigger: 'hover',
  value: 'id',      // 指定值字段为 id
  label: 'name',    // 指定标签字段为 name
  children: 'children' // 指定子节点字段为 children
}
// 级联选择器变化处理函数 - 借鉴 supplier/modify.vue 的方式
const handleChange = (val) => {

  if (val && val.length >= 2) {
    // 设置省份ID和城市ID
    dialogFormData.value.provinceId = val[0]  // 省份ID
    dialogFormData.value.cityId = val[1]      // 城市ID

    // 同时设置省份和城市名称
    setAreaNames(val)
  } else if (val && val.length === 1) {
    // 只选择了省份
    dialogFormData.value.provinceId = val[0]
    dialogFormData.value.cityId = null
    dialogFormData.value.provinceName = getAreaName(val[0])
    dialogFormData.value.cityName = null
  } else {
    // 没有选择或清空选择
    dialogFormData.value.provinceId = null
    dialogFormData.value.cityId = null
    dialogFormData.value.provinceName = null
    dialogFormData.value.cityName = null
  }
}

// 根据ID获取地区名称
const getAreaName = (id) => {
  if (!areaList.value) return ''

  const findName = (areas) => {
    for (let area of areas) {
      if (area.id === id) {
        return area.name
      }
      if (area.children) {
        const name = findName(area.children)
        if (name) return name
      }
    }
    return ''
  }
  return findName(areaList.value)
}

// 设置地区名称
const setAreaNames = (val) => {
  if (!areaList.value || !val.length) return

  // 查找省份名称
  const provinceName = getAreaName(val[0])
  if (provinceName) {
    dialogFormData.value.provinceName = provinceName
  }

  // 查找城市名称
  if (val.length >= 2) {
    const cityName = getAreaName(val[1])
    if (cityName) {
      dialogFormData.value.cityName = cityName
    }
  }
}
const confirm = async () => {
  let res = null
  if (dialogFormData.value.id) {
    res = await updateApi(dialogFormData.value)
  } else {
    res = await addApi(dialogFormData.value)
  }
  if (res.code) {
    ElMessage.success('操作成功!')
    resetForm()
    instance.emit('search')
  } else {
    ElMessage.error('操作失败！')
  }
}
defineExpose({
  dialogFormData,
  dialogVisible,
  getArea: getAreaList
})
</script>
<template>
  <el-dialog v-model="dialogVisible" style="width: 400px;" title="仓库设置">
    <el-form ref="ruleFormRef" :model="dialogFormData" :rules="rules">
      <el-row>
        <el-col span="24">
          <el-form-item prop="supplierName">
            <el-input v-model="dialogFormData.name" placeholder="仓库名称" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="24">
          <el-form-item>
            <div class="m-4">
              <el-cascader v-model="value" placeholder="地区" :options="areaList" :props="cascaderProps"
                @change="handleChange" clearable style="width: 300px;" />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">
          <el-form-item prop="linkPhone">
            <el-input v-model="dialogFormData.address" placeholder="详细地址" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">
          <el-form-item prop="linkPhone">
            <el-input v-model="dialogFormData.location" placeholder="经纬度" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">
          <el-form-item prop="linkPhone">
            <el-input v-model="dialogFormData.personChargeName" placeholder="负责人名字" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">
          <el-form-item prop="linkPhone">
            <el-input v-model="dialogFormData.saasId" placeholder="saasId" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="linkPhone" label="是否生效">
        <el-switch v-model="dialogFormData.isDel" active-value='0' inactive-value='1' />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>